import React from 'react'
import { connect } from 'dva'
import queryString from 'query-string'
import {
  Button,
  Card
} from 'antd'
import List from './List'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import AddUser from './AddUser'
import NormalFilter from 'components/Filter/NormalFilter'
import styles from './List.less'

const users = ({ location, dispatch, user, role, organization, app, loading }) => {
  location.query = queryString.parse(location.search)
  const { items, pagination, visible, roles, roleIds, userId, showBindRolesModal, showBindOrganizationModal, organizationIds, loadingStatus, type } = user
  const { items: roleItems } = role
  const { tree: organizationItems, searchKeyword } = organization

  const listProps = {
    dataSource: items,
    loading: loading.effects['user/query'],
    pagination,
    pageChangeAction: 'user/query',
    dispatch,
    location,
    roleProps: {
      dataSource: roleItems,
      pagination: false,
      dispatch,
      roles,
      roleIds,
      showBindRolesModal,
      userId
    },
    organizationProps: {
      showBindOrganizationModal,
      dataSource: organizationItems,
      dispatch,
      organizationIds,
      pagination: false,
      userId,
      loading,
      searchKeyword,
    },
    showRole(record) {
      dispatch({
        type: 'user/getUserRoles',
        payload: record.id
      })
      dispatch({
        type: 'role/query',
        payload: {}
      })
      dispatch({
        type: 'user/showUserRolesModal',
        payload: true
      })
    },
    showOrganization(record) {
      dispatch({
        type: 'user/getUserOrganizations',
        payload: record.id
      })
      dispatch({
        type: 'organization/getTree',
        payload: {}
      })
      dispatch({
        type: 'user/showUserOrganizationsModal',
        payload: true
      })
    },
    onEnable(record) {
      dispatch({
        type: 'user/onEnabled',
        payload: {
          id: record.id
        }
      })
    },
    onDisable(record) {
      dispatch({
        type: 'user/onDisabled',
        payload: {
          id: record.id
        }
      })
    },
  }

  const doShowAdd = (option,type) => {
    dispatch({
      type: 'user/setType',
      payload: type
    })
    dispatch({
      type: 'user/showUserAdd',
      payload: {
        isShow: option
      }
    })
  }
  const doAddUser = (values) => {
    dispatch({
      type: 'user/findUser',
      payload: values
    })
  }
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'displayName',
        title: '姓名'
      }, {
        type: 'input',
        id: 'mobile',
        title: '手机号'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'user/query',
        payload: {
          ...value
        }
      })
    }
  }

  const syncUser = () => {
    doShowAdd(true,"sync")
    dispatch({
      type: 'user/setType',
      payload: "sync"
    })

  }

  const breadcrumbList = [
    {
      title: '系统管理'
    }, {
      title: '系统用户'
    }
  ]

  const addProps = {
    visible,
    destroyOnClose: true,
    onCancel: () => {
      doShowAdd(false)
    },
    title:type === "add"?"添加用户":"同步更新用户",
    onOk: (values) => {
      if (type === "add") {
        doAddUser(values)
      } else if (type === "sync") {
        if (!_.isEmpty(values.keyword)) {
          if (values.keyword.indexOf("@") !== -1) {
            values.email = values.keyword;
          } else {
            values.phone = values.keyword;
          }
          delete values.keyword
          dispatch({
            type: 'user/syncUser',
            payload: {...values}
          })
        }
      }

    },
  }

  return (
    <PageHeaderLayout title="系统用户" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <NormalFilter {...filterProps} />
        <div className={styles.tableList}>
          <div className={styles.tableListOperator}>
            <Button
              icon="calculator"
              type="primary"
              onClick={() => doShowAdd(true,"add")}>
              添加
            </Button>
            <Button
              icon="retweet"
              type="primary"
              onClick={() => syncUser()}>
              更新用户信息
            </Button>
          </div>
          <List {...listProps} />
          <AddUser {...addProps} />
        </div>
      </Card>
    </PageHeaderLayout>
  )
}

export default connect(({ user, app, role, organization, loading }) => ({ user, app, role, organization, loading }))(users)
